<template>
    <div>
        <el-form :inline="true" :model="course" class="demo-form-inline">
            <el-form-item label="课程编号">
                <el-input placeholder="请输入课程编号" v-model="course.course_id" clearable></el-input>
            </el-form-item>
            <el-form-item label="课程名称">
                <template>
                    <el-select v-model="course.course_name" placeholder="请选择课程">
                        <el-option v-for="c in courseData" :key="c" :label="c" :value="c"></el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="课程类别">
                <el-radio-group v-model="course.category" @change="cQuery">
                    <el-radio-button label="1">必修课</el-radio-button>
                    <el-radio-button label="2">选修课</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <br />
            <el-form-item>
                <el-button type="primary" @click="cQuery">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="toReset">重置</el-button>
            </el-form-item>
        </el-form>
        <table style="width: 100%; border: none; margin-top: 30px;" cellspacing="0">
            <tr style="font-weight: 800;">
                <td>课程编号</td>
                <td>课程名称</td>
                <td>课程类别</td>
                <td>
                    <el-button type="info" disabled>操作</el-button>
                    <el-button type="success" @click="courseAdd()">新增</el-button>
                </td>
            </tr>
            <tr v-for="c in getCourseMsg" :key="c.course_id">
                <td>{{ c.course_id }}</td>
                <td>{{ c.course_name }}</td>
                <td>
                    <span v-if="c.category==1">必修课</span>
                    <span v-if="c.category==2">选修课</span>
                </td>
                <td>
                    <el-button type="primary" @click="tcUpdate(c.course_id)">修改</el-button>
                    <el-button type="danger" @click="delConfirm(c.course_id)">删除</el-button>
                </td>
            </tr>
        </table>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:"CourseQuery",
        data() {
            return {
                course: {
                    course_id:"",
                    course_name:"",
                    category:"1",
                },
                courseData:"",
                getCourseMsg: [],
                showModal: false
            }
        },
        created() {
            this.cQuery();
            this.getData();
        },
        methods: {
            getData() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/course/getCourseData',
                }).then(res=>{
                    this.courseData = res.data.data
                }).catch(err=>{
                    console.log(err);
                })
            },
            cQuery() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/course/findCoursePart',
                    params:this.course
                }).then(res=>{
                    this.getCourseMsg=res.data.data;
                    console.log(this.getCourseMsg);
                }).catch(err=>{
                    console.log(err);
                })
            },
            delConfirm(course_id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.tcDel(course_id);
                this.$message({ 
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            tcDel(course_id) {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/course/removeCourseByCourseId',
                    params: {
                        course_id:course_id
                    }
                }).then(res=>{
                    this.cQuery();
                }).catch(err=>{
                    console.log(err);
                })
            },
            toReset() {
                this.course.course_id="";
                this.course.course_name="";
                this.course.category="1";
                this.cQuery();
            },
            tcUpdate(course_id) {
                this.$router.replace({
                    name:'updateCourse', 
                    params:{
                        course_id:course_id,
                    }
                })
            },
            courseAdd() {
                this.$router.replace({
                    name:'addCourse', 
                })
            }
        },
    }
</script>

<style scoped>

</style>